const triangle = document.getElementById('triangle');
const ctx = triangle.getContext("2d"); // canvas 绘制区域

// ----- 绘制线路
ctx.beginPath(); // 开始绘制
ctx.moveTo(50, 0); // 起点A(0,0)
// ctx.lineTo(-50, 0); // 从起点A(0,0)绘制到B(-50,0)
ctx.lineTo(0, 150); // 从B(30,0)绘制到C(-60,150)
ctx.lineTo(150, 100); // 从B(30,0)绘制到C(-60,150)

// --- line 填充
ctx.lineWidth = '1'; //设置线条宽度
ctx.strokeStyle = 'CECECE';
// ctx.lineCap='rouand'; // 显示圆形
ctx.lineCap = 'square'; // 显示方形
ctx.stroke();

// ----- 区域 填充颜色
// createLinearGradient = xStart, yStart, xEnd, yEnd
const grd1 = ctx.createLinearGradient(-50, 0, -60, 150); // 渐变方向-Y轴
grd1.addColorStop(0, '#CECECE'); //起始颜色
grd1.addColorStop(1, 'white'); //终点颜色
ctx.fillStyle = grd1; //以上面定义的渐变填充
ctx.fill(); //闭合形状并且以填充方式绘制出来